<template>
  <div class="container">
    <div class="header">不良时推移</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import commomOption from './commomOption.ts'
import { renderItem } from './blockBarInit.ts'
import * as echarts from 'echarts'

const option = {
  tooltip: {
    trigger: 'axis',
  },
  grid: commomOption.grid,
  legend: commomOption.legend,
  xAxis: Object.assign({}, commomOption.xAxis, {
    data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
  }),
  // yAxis: commomOption.yAxis,
  // yAxis2: {
  //   type: 'value',
  //   name: 'Y 轴 2'
  // },
  yAxis: [{
    //name: 'GB/日',
    type: 'value',
    ...commomOption.yAxis
  }, {
    //name: 'GB/日',
    type: 'value',
    ...commomOption.yAxis
  }],
  series: [
    {
      type: 'line',
      name: '线1',
      smooth: true,
      itemStyle: {
        color: 'rgba(255, 156, 93, 1)',
        borderColor: 'rgba(32, 255, 231, 1)',
        borderWidth: 2,
      },
      lineStyle: {
        width: 1,
      },
      data: [50, 30, 24, 18, 35, 47, 60],
    },
    {
      name: '数据1',
      type: 'custom',
      barWidth: 15,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#3CAAB7' },
            { offset: 1, color: 'rgba(19,37,67,0.08)' }
          ])
        }
      },
      renderItem: (params, api) => renderItem(params, api, 0),
      label: {
        normal: {       // 重写未完成label，通过计算属性重新给formatter赋值，返回
          show: true,   // 计算的总数
          position: 'top',
          textStyle: { color: '#3EFFE8' }
        }
      },
      yAxisIndex: 0,
      data: [80, 136, 38, 46, 15, 79, 171]
    },

    {
      name: '数据2',
      type: 'custom',
      barWidth: 15,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#00AEFF' },
            { offset: 1, color: 'rgba(19,37,67,0.08)' }
          ])
        }
      },
      renderItem: (params, api) => renderItem(params, api, 1),
      label: {
        normal: {       // 重写未完成label，通过计算属性重新给formatter赋值，返回
          show: true,   // 计算的总数
          position: 'top',
          textStyle: { color: '#3EFFE8' }
        }
      },
      yAxisIndex: 1,
      data: [10, 36, 28, 86, 35, 9, 71]
    },
  ],
}

// 在Vue3中，getCurrentInstance()可以用来获取当前组件实例
const { proxy } = getCurrentInstance()
// 获取echart挂载的DOM节点
const echartsBox = ref()
// echartsf弹窗出现
function echartInit() {
  //nextTick后再调用，不然会报错
  nextTick(() => {
    // echarts初始化
    let myChart = proxy.$echarts.init(echartsBox.value)

    option && myChart.setOption(option)

    // 根据页面大小自动响应图表大小
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  })
}
echartInit()
</script>
<style lang="less" scoped>
@import url(./container.less);
</style>
